<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<view class="plr15 ptb30 bgPart">
			<view class="flex alcenter mb20" v-if="false">
				<view class="bd_input ptb10 plr10 tc flex1 radius4" @click="showP=true">
					<view class="flex between"><!-- <text>{{$t('bind.cur_select')}}</text> -->
					<text>{{$t('assets.cur_coin')}}</text>
					<text>{{symbol}}</text></view>
				</view>
				<u-picker  mode="selector" :default-selector="[0]"
				:confirm-text="confirmText" :cancel-text="cancelText"
				 v-model="showP"  :range="coinArr" @confirm="getSymbol" range-key="symbols">

				</u-picker>
				<!-- <picker class="bd_input ptb10 plr10 tc flex1 radius4" :value="symbol" :range="coinArr" @change="getSymbol" range-key="symbols">

				</picker> -->
			</view>
			<view class=" flex alcenter between bd2f" >
				<view class="flex alcenter pl15 flex1">
					<view class="flex column alcenter ">
						<text class="wt5 h5 radius50p bgBlue"></text>
						<view class="h20 mt5 mb5 bdl2f" ></view>
						<text class="wt5 h5 radius50p bgred"></text>
					</view>
					<view class="ml10 flex1" >
						<text class="blue pr10" >{{$t('assets.from')}}</text>
						<view class="bd_input h40 lh40 bdb2f flex alcenter">
						<picker  class="ptb10 plr10 tc flex1 radius4" :value="assetsFromIndex" :range="getFromArr" @change="selectFrom" range-key="type">
							<view class="flex between" >
							<text>{{assetsFromType.type}}</text></view>
							
						</picker>
						<view class="h40 lh40 bdb2f flex2 flex  alcenter">
							<input type="digit" class="h40 flex1 input-uni" v-model="numberFrom"  :placeholder="assetsFromType.usedPrice">
							<text class="blue pr10" @tap="all">max</text>
						</view>
						
						</view>
						<u-gap height="40" bg-color=""></u-gap>
						<text class="blue pr10">{{$t('assets.to')}}</text>
						<view class="bd_input h40 lh40 flex alcenter">
						<picker class="ptb10 plr10 tc flex1 radius4" :value="assetsToIndex" :range="getToArr" @change="selectTo" range-key="type">
							<view class="flex between" >
							<text>{{assetsToType.type}}</text></view>
						</picker>
						<view class="h40 lh40 bdb2f flex2 alcenter">
							<input type="digit" class="h40 flex1 input-uni" v-model="numberTo"  disabled="true">
							
						</view>
						
						</view>
					</view>
				</view>
				<view class="plr15 h120 flex alcenter jscenter" >
					<view class="wt30 h30 radius50p bggray flex alcenter jscenter" @tap="tapChange">
						<image src="../../static/image/transfer1.png" class="wt30 h30"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bgHeader h10"></view> -->
		<view class="mt10 plr15 bgPart pt20" style="min-height: 75.0vh;" >
			<view class="" v-if="false">{{$t('assets.transfernum')}}</view>
			<view v-if="false" class="flex alcenter between bdb1f mt10">
				<input type="digit" class="h40 flex1 input-uni" v-model="number"  :placeholder="$t('assets.p_transfernum')">
				<view class="flex alcenter">
					<text class="blue ft14 pr10 bdr_white50">{{symbol||'--'}}</text>
					<view class="pl10" @tap="all">{{$t('trade.all')}}</view>
				</view>
			</view>
			<view v-if="false" class="mt10 blue ft12">
				{{$t('trade.use')}}
				<text >{{balance}}</text>
				{{symbol}}
			</view>
			<view class="mt50 bgBlue radius4 ptb10 white ft14 tc mb10" @tap="transfer">{{$t('assets.transfer')}}</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import {commonAllCoin,convertPage,convert,flashRecord,flashExchange,wallet}from '../../common/apiString.js'

	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return {
				showP:false,
				confirmText:this.$t('login.c1'),
				cancelText:this.$t('login.c2'),
				number:'',
				numberFrom:'',
				numberTo:'',
				name:'',
				coinInfo:{},
				changeName:[this.$t('assets.leveracc'),this.$t('assets.tradeacc'),this.$t('assets.legalacc'),],
				changeType:['lever','change','legala'],
				type:0,//OTC币
				hasChange:0,
				coinRate:0,
				animateTab1:'',
				animateTab2:'',
				currencylever:{},
				currencyTrade:{},
				balance:'',
				wallet_id:'',
				getTotalArr:[],
				getFromArr:[],
				getToArr:[],
				coinArr:[],
				assetsFromType:[],
				assetsToType:[],
				assetsFromIndex:0,
				assetsToIndex:1,
				symbol:'',
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
			getTotal(){
				/*var arr = [
					{value:'WALLET',name:this.$t('assets.wallet')},
					{value:'CONTRACT',name:this.$t('assets.lever')},
					{value:'LEGAL',name:this.$t('assets.legal')},
					{value:'CURRENCY',name:this.$t('assets.trade')},
					{value:'OPTION',name:this.$t('assets.option')},
					{value:'MINING',name:this.$t('assets.mine')},

				];
				this.getTotalArr = arr;*/
				return this.getTotalArr
			},
			getFrom(){
				var arr = this.getTotalArr;
				this.getFromArr = arr;
				return arr
			},
			getTo(){
				var arr = this.getTotalArr;
				this.getToArr = arr;
				return arr
			},
			getFromValue(){
				return this.form.fromValue
			}
		},
		watch: {
		        /* 使用watch来响应数据的变化 */
		        assetsFromType(newVal, oldVal) {
					//更新钱包数据，以及 币种信息
					this.getCoinInfo()
					this.uploadInfo()

		        },
				numberFrom(newVal, oldVal) {
						this.coinRate=this.assetsFromType.close/this.assetsToType.close
						this.numberTo=newVal*this.coinRate
					


				},
				assetsToType(newVal, oldVal) {

						this.uploadInfo()
						


				}
		    },
		onLoad(e) {
			this.name=e.name;
			uni.setNavigationBarTitle({
				title:this.$t('home.flash'),
			})
			this.$utils.setTheme(this.theme);
			this.getList()
			//this.getCoinInfo()
		},
		created(){
				var that = this;
				
			},
		onPullDownRefresh() {
			this.getList()
			this.getCoinInfo()
		},
		methods: {
			uploadInfo(){
				if(this.symbol == undefined || this.symbol == ''){
					return
				}
				
				//console.log(this.assetsFromType)
				//console.log(this.assetsToType)
				var dto={
					'type':this.symbol,
					'from':this.assetsFromType.type
					};
				this.$utils.initDataToken({url:convertPage,data:dto,type:'get'},res=>{
					this.balance=res.list
					
					//this.symbol = this.coinArr[0].symbols
					//this.getUserInfo();
					})
			},
			selectFrom(e){//选择from e.target.value
				var that = this;
				that.assetsFromType = that.getFromArr[e.target.value]
				var value = that.assetsFromType.id
				var filtered  = (that.getTotal).filter(function(element){
					return element.id != that.assetsFromType.id
				});
				that.getToArr = filtered;
				if(value == that.assetsToType.id){
					that.assetsToType = filtered[0];
				}
			},
			selectTo(e){//选择To e.target.value
				var that = this;
				that.assetsToType = that.getToArr[e.target.value]
				var value = that.assetsToType.id
				var filtered  = (that.getTotal).filter(function(element){
					return element.id != that.assetsToType.id
				})
				that.getFromArr = filtered;

				if(value == that.assetsFromType.id){
					that.assetsFromType = filtered[0];
				}
				this.numberFrom=0
			},
			//获取币种
			getCoinInfo(){
				/*var that =this
				if(that.assetsToType.value == 'OPTION' ||that.assetsToType.value =='LEGAL'||that.assetsToType.value =='CONTRACT'||
				that.assetsFromType.value == 'OPTION' ||that.assetsFromType.value =='LEGAL'||that.assetsFromType.value =='CONTRACT'){
					this.coinArr =[]
					this.coinArr.push({'symbols':'USDT'})
					this.symbol ='USDT'
					return
				}

				this.$utils.initDataToken({url:commonAllCoin,data:{type:'CURRENCY'},type:'POST'},res=>{
					this.coinArr=res;
					this.symbol = this.coinArr[0].symbols
					res.forEach((item)=>{
						if(item.symbols=="USDT"){
							this.symbol = item.symbols
						}
					})
					
					this.uploadInfo()
					//this.getUserInfo();
				})*/
			},
			//更换币种
			getSymbol(e){
				this.symbol = this.coinArr[e[0]].symbols
				this.uploadInfo()
			},
			//根据 当前钱包 获取 币种信息
			getAssetOfCoin(){

			},
			getList(){
				var that =this
				var dto={
					'type':"WALLET",
					'valuation': 'USDT',
					'flash': 'Y',
					'hide': 'N'
					};
				this.$utils.initDataToken({url:wallet,data:dto,type:'get'},res=>{
					that.getTotalArr=res.list;
					that.assetsFromType = that.getFrom[0];
					that.assetsToType = that.getTo[1]
					that.numberFrom=0
					})
			},
			tapChange(){
				var value = this.assetsFromType;
				var index =this.assetsFromIndex;
				this.assetsFromType = this.assetsToType
				this.assetsToType = value
				this.assetsFromIndex = this.assetsToIndex
				this.assetsToIndex=index
				this.numberFrom=0
				this.type=this.type==0?1:0;
			},
			all(){
				this.numberFrom=this.assetsFromType.usedPrice
			},
			transfer() {
				// console.log(this.changeType[0],this.changeType[1])
				// return;
				if(!this.numberFrom){
					return this.$utils.showLayer(this.$t('assets.p_transfernum'))
				}
				if(this.numberFrom>this.assetsFromType.usedPrice || this.numberFrom <= 0){
					return this.$utils.showLayer(this.$t('assets.p_transfernumMustGl'))
				}

				this.$utils.initDataToken({url:flashExchange,type:'get',data:{
					'from':this.assetsFromType.type,
					'to':this.assetsToType.type,
					'numbers':this.numberFrom
				}},(res,msg)=>{
					this.number='';
					setTimeout(()=>{
						this.$utils.showLayer(this.$t('bico.W88'))
						this.getList()
					},100)
					setTimeout(()=>{
						this.uploadInfo()
					},500)
				})
			}
		},
	}
</script>

<style>
	.animateUp{
		transform: translateY(-80upx);
		transition: all .5s;
	}
	.animateDown{
		transform: translateY(80upx);
		transition: all .5s;
	}
	.animateOff{
		transform: translateY(0);
		transition: all .5s;
	}

	uni-view {
	    box-sizing: border-box;
	    line-height: 1.8;
	}
</style>
